import SectionWrapper from "../../SectionWrapper"
import {FaPython, FaReact} from "react-icons/fa";
import {
    FolderOpenOutlined,
    JavaOutlined,
    JavaScriptOutlined,
    OpenAIFilled,
    OpenAIOutlined,
    PythonOutlined
} from "@ant-design/icons";
import {FaGolang} from "react-icons/fa6";
import {SiServerless} from "react-icons/si";
import {RiNextjsLine} from "react-icons/ri";
const ToolKit = () => {

    const features = [
        {
            icon: <JavaOutlined style={{ fontSize: "1.6rem" }} />,
            title: "Java",
            desc: "Java 具备跨平台特性、强大库支持、面向对象编程、内存管理自动化，适合开发大型企业级应用和跨平台软件。"
        },
        {
            icon: <FaReact  style={{ fontSize: "1.6rem" }}/>,
            title: "React",
            desc: "React 提供组件化开发、虚拟DOM和单向数据流，提升界面性能、代码复用性和开发效率，适合复杂应用开发。"
        },
        {
            icon: <FaGolang style={{ fontSize: "1.8rem" }}/>,
            title: "GoLang",
            desc: "Golang 以高性能、简洁语法、内置并发处理能力著称，适合构建高效、可扩展的系统和网络应用。"
        },
        {
            icon: <FaPython style={{ fontSize: "1.6rem" }}/>,
            title: "Python",
            desc: "Python 拥有丰富的库和框架，支持快速开发，适用于Web开发、数据科学、人工智能等多个领域。"
        },
        {
            icon: <SiServerless style={{ fontSize: "1.6rem" }}/>,
            title: "Serverless",
            desc: "Serverless 架构允许开发者专注于代码，而无需管理服务器。它支持自动扩展、按需计费，降低运维成本。"
        },
        {
            icon: <RiNextjsLine style={{ fontSize: "1.6rem" }}/>,
            title: "Next.JS",
            desc: "Next.js 是一个基于 React 的框架，支持服务器端渲染和静态网站生成，提升性能和SEO优化。它简化了开发流程，提供路由和API功能，适合构建高性能应用。"
        },
    ]

    return (
        <SectionWrapper>
            <div id="toolkit" className="max-w-screen-xl mx-auto px-4 text-gray-600 md:px-8">
                <div className="max-w-2xl mx-auto space-y-3 sm:text-center">
                    <h2 style={{marginLeft: "5%"}} className="text-gray-800 text-3xl font-semibold sm:text-4xl">
                        我们可以为您做些什么？
                    </h2>
                    <p>
                        These are a few of our skilled at things
                    </p>
                </div>
                <div className="mt-12">
                    <ul className="grid gap-y-8 gap-x-12 sm:grid-cols-2 lg:grid-cols-3">
                        {
                            features.map((item, idx) => (
                                <li key={idx} className="flex gap-x-4">
                                    <div className="flex-none w-12 h-12 gradient-border rounded-full flex items-center justify-center">
                                        {item.icon}
                                    </div>
                                    <div>
                                        <h4 className="text-lg text-gray-800 font-semibold">
                                            {item.title}
                                        </h4>
                                        <p className="mt-3">
                                            {item.desc}
                                        </p>
                                    </div>
                                </li>
                            ))
                        }
                    </ul>
                </div>
            </div>
        </SectionWrapper>
    )
}

export default ToolKit